<!DOCTYPE html>
<html>
	<head>
		<title>图片切换</title>
	 
	</head>
	<body>
		<img src="https://t7.baidu.com/it/u=1699409092,3263312049&fm=193&f=GIF" width="500" height="300" id="flower">
		<br>
		<button id="prev" >上一张</button>
		<button id="next" >下一张</button>
	 
		<script type="text/javascript">
			
			var arr = [
				'https://t7.baidu.com/it/u=1699409092,3263312049&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=3915743384,2060495762&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=3796392429,3515260353&fm=193&f=GIF',
				'https://t7.baidu.com/it/u=735474575,14049849&fm=193&f=GIF'
			]
			
			console.log(arr,arr.length);
			
			
			//获取事件源 需要的标签
			var flower = document.getElementById('flower');
			// var flower = document.getElementsByName('yangyang')[0];
			// console.log(flower == flower2);
			console.log(flower);
			
			var prevBut=document.getElementById('prev');
			var nextBut = document.getElementById('next');
			
			var mixIndex = 1;
			var maxIndex = 4;
			
			var currentIndex = mixIndex;
	 
			//监听按钮的点击事件
			//下一张
			nextBut.onclick = function(){
				
				//到最后一张，当前为第四张，当再次点击事件，当前跳回第一张
				if (currentIndex === maxIndex) {
					currentIndex = mixIndex;
				}else{
					currentIndex = currentIndex + 1;
				}
				console.log("当前下标是：" + currentIndex);
				console.log(flower);
				// flower.setAttribute('src',`images/${currentIndex}.jpeg`)
				updateImg();
			}
			//上一张
			prevBut.onclick = function(){
				if (currentIndex === mixIndex) {
					currentIndex = maxIndex;
				}else{
					currentIndex--;
				}
				console.log("当前下标是：" + currentIndex);
				// flower.setAttribute('src',`images/${currentIndex}.jpeg`)
				updateImg();
			}
			
			//刷新img对象的显示图片
			function updateImg(){
				flower.setAttribute('src',arr[currentIndex-1]);
			}
			
	 
		</script>
	</body>
</html>